<template>
<div>
<div style="height: 50px;line-height: 50px;padding-left:15px">
				<span style="display:block;float:left"  v-for=" x,index in  buildList" >{{x.name}}</span>
</div>
	<div :style="{backgroundImage:'url('+ backgroundDiv.backgroundImage +')'}" class="background-img" ref="myDiv">
		<!--<button @click="sure">确定</button>-->
		<!--  -->
		<!--:style="item.moveStyle"-->
             <!-- v-on:dragstop="resize($event,index)"-->

		<VueDragResize  v-on:clicked ="moveIng($event)" v-on:dragging ="dragging($event,index)"  v-on:dragstop="resize($event,index)"   :minw="50" :w="item.btnType == 0?200:150" @mouseenter.native="dataDetails(item)" @mouseleave.native="hiddenDetail(item)" :isActive="true" :h="23" :isResizable="false" :x="item.location_X" :y="item.location_Y" v-for="(item,index) in deviceData" style="cursor:pointer;border-radius:20px;background: white;" :style="item.moveStyle">
			<!-- @clicked="showModal(item)"  -->
			<div >
				<img :src="item.status == '1'?item.ico:item.closeIco" class="drag_img">
				<div v-if="item.isShowEnd" style="display: block;margin-left: 5px;float:left">{{item.name}}</div>
			</div>
			<div v-if="item.isShowEnd">
				<el-switch style="margin-left: 5px;float: left;margin-top:1px" v-if="item.btnType == 0" v-model="item.buttonType" active-color="#13ce66" v-on:change="changeType(item)" @click.stop="ddd()" inactive-color="#ff4949"></el-switch>
				<span style="display:block;font-size:15px;padding-left:10px" v-if="item.btnType != 6 && item.btnType != 7 && item.btnType != 8 ">{{item.value}}</span>
				<!---->
				<div style="width:180px;border-radius: 30px;height: 19px;margin-top: 1px;float: left;font-size: 10px;text-align: center;color:white" v-if="item.btnType == 5">

					<div style="line-height: 20px;float: left;width:19%;color:black">{{clValue}}</div>
				</div>
			</div>
		</VueDragResize>
		<el-dialog :title="clValue" :visible.sync="kongtiaoFormVisible">
			<div style="width:27%;float: left;background: #13ce66;height: 100%;border-top-left-radius:30px;border-bottom-left-radius:30px;text-align:center" @click.stop="cl(1)">打开</div>
			<div style="width:27%;float: left;background: yellow;height: 100%;text-align:center" @click.stop="cl(0)">暂停</div>
			<div style="width:27%;float:left;background: #ff4949;height: 100%;border-top-right-radius:30px;border-bottom-right-radius:30px;text-align:center" @click.stop="cl(2)">关闭</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="kongtiaoFormVisible = false">关闭窗口</el-button>
			</div>
		</el-dialog>
		<!-- 空调的弹窗 -->
		<el-dialog title="空调" :visible.sync="kongtiao_dialogFormVisible" :close-on-click-modal="ss">
			<div class="content" :style="note">
				<div class="btnContent" style="height:10%">
					<div class="btn_left">
						<div style="text-align:center">
							<span>{{kongTiaoShowData.cold?'制冷':'制热'}}</span>
						</div>
					</div>
					<div class="btn_right">
						<div style="text-align:center">
							<span>{{kongTiaoShowData.temp == null ?0:kongTiaoShowData.temp}}</span>
						</div>
					</div>
				</div>
				<div class="btnContent" style="height:10%">
					<div class="btn_left">
						<div style="text-align:center">
							<span>{{kongTiaoShowData.swing?'扫风':'不扫风'}}</span>
						</div>
					</div>
					<div class="btn_right">
						<div style="text-align:center">
							<span>{{kongTiaoShowData.strongWind?'强风':'弱风'}}</span>
						</div>
					</div>
				</div>
				<div class="btnContent">
					<div class="btn_left">
						<div style="text-align:center">
							<img src="../assets/close.png" @click="ktClose()">
							<span>开关</span>
						</div>
					</div>
					<div class="btn_right">
						<div style="text-align:center">
							<img src="../assets/moshi.png" @click="ktMoshi()">
							<span>模式</span>
						</div>
					</div>
				</div>
				<div class="btnContent">
					<div class="btn_left">
						<div style="text-align:center">
							<img src="../assets/left.png" @click="ktWdUp()">
							<span>温度-</span>
						</div>
					</div>
					<div class="btn_right">
						<div style="text-align:center">
							<img src="../assets/right.png" @click="ktWdAdd()">
							<span>温度+</span>
						</div>
					</div>
				</div>
				<div class="btnContent">
					<div class="btn_left">
						<div style="text-align:center">
							<img src="../assets/speed.png" @click="ktFs()">
							<span>风速</span>
						</div>
					</div>
					<div class="btn_right">
						<div style="text-align:center">
							<img src="../assets/direction.png" @click="ktFx()">
							<span>风向</span>
						</div>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">

				<el-button @click="kongtiao_dialogFormVisible = false">关闭窗口</el-button>
			</div>
		</el-dialog>

		<!-- 遥控器的弹窗 -->
		<el-dialog title="遥控器" :visible.sync="yaokongqi_dialogFormVisible" :close-on-click-modal="ss">
			<div class="content" :style="note">
				<div class="show1">
					<div class="btnContent1" style="height:100%">
						<div class="btn_left">
							<div style="text-align:center">
								<img src="../assets/power.png" @click="ykqPower()">
								<span>电源</span>
							</div>
						</div>
						<div class="btn_right">
							<div style="text-align:center">
								<img src="../assets/back.png" @click="ykqBack()">
								<span>返回</span>
							</div>
						</div>
					</div>
				</div>
				<div class="show1">
					<div class="btnContent1" style="height:100%">
						<div class="btn_left">
							<div style="text-align:center">
								<img src="../assets/menu.png" @click="ykqMenu()">
								<span>菜单</span>
							</div>
						</div>
						<div class="btn_right">
							<div style="text-align:center">
								<img src="../assets/sure.png" @click="ykqSure()">
								<span>确定</span>
							</div>
						</div>
					</div>
				</div>
				<div class="yaokongClass" :style="yaoKongBack">
					<div style="position: absolute;left: 39%;top: 2%;">
						<img src="../assets/up.png" style="height:40px;width:40px" @click="ykqUp">
					</div>
					<div style="position: absolute;right: 2%;top: 36%;">
						<img src="../assets/right.png" style="height:40px;width:40px" @click="ykqRight">
					</div>
					<div style="position: absolute;bottom:6%;left:39%">
						<img src="../assets/down.png" style="height:40px;width:40px" @click="ykqDown">
					</div>
					<div style="position: absolute;top: 36%;left: 4%;">
						<img src="../assets/left.png" style="height:40px;width:40px" @click="ykqLeft">
					</div>
				</div>
				<div class="yaokongClass" :style="yaoKongBack">
					<div style="position: absolute;left: 39%;top: 2%;">
						<img src="../assets/chup.png" style="height:40px;width:40px" @click="Up">
					</div>
					<div style="position: absolute;right: 2%;top: 36%;">
						<img src="../assets/volup.png" style="height:40px;width:40px" @click="Right">
					</div>
					<div style="position: absolute;right: 38%;top: 36%;">
						<img src="../assets/menu1.png" style="height:40px;width:40px" @click="Down">
					</div>
					<div style="position: absolute;bottom:6%;left:39%">
						<img src="../assets/chdown.png" style="height:40px;width:40px" @click="Down">
					</div>
					<div style="position: absolute;top: 36%;left: 4%;">
						<img src="../assets/voldown.png" style="height:40px;width:40px" @click="Left">
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="yaokongqi_dialogFormVisible = false">关闭窗口</el-button>
			</div>
		</el-dialog>

		<!-- type为6的水流弹窗 :visible.sync="dialogFormVisible_six"-->
		<el-dialog :title="actionName" :visible.sync="dialogFormVisible_six" width="80%" :close-on-click-modal="ss">
			<div class="top">
				<div class="top_left">
					<!-- <div style="width:20%;float: left;text-align:center">
						<span style="display: block;padding-top:10px">{{buttonSixData.btns[0].text}}</span>
						<el-switch v-model="buttonSixData.btns[0].status" active-color="#13ce66" inactive-color="#ff4949" v-on:change="subthreeChangeType($event,1,6)" active-text="开" inactive-text="关"></el-switch>
					</div>
					<div style="width:20%;float: left;text-align:center">
						<span style="display: block;padding-top:10px">{{buttonSixData.btns[1].text}}</span>
						<el-switch v-model="buttonSixData.btns[1].status" active-color="#13ce66" inactive-color="#ff4949" v-on:change="subthreeChangeType($event,2,6)" active-text="开" inactive-text="关"></el-switch>
					</div>
					<div style="width:20%;float: left;text-align:center">
						<span style="display: block;padding-top:10px">{{buttonSixData.btns[2].text}}</span>
						<el-switch v-model="buttonSixData.btns[2].status" active-color="#13ce66" inactive-color="#ff4949" v-on:change="subthreeChangeType($event,3,6)" active-text="开" inactive-text="关"></el-switch>
					</div>
					<div style="width:20%;float: left;text-align:center">
						<span style="display: block;padding-top:10px">{{buttonSixData.btns[3].text}}</span>
						<el-switch v-model="buttonSixData.btns[3].status" active-color="#13ce66" inactive-color="#ff4949" v-on:change="subthreeChangeType($event,4,6)" active-text="开" inactive-text="关"></el-switch>
					</div> -->

					<div style="width:25%;float: left;text-align:center">
						<el-input v-model="buttonSixData.btns[0].text" placeholder="请输入内容" type="textarea" style="width:80%;margin-left:10%"></el-input>
						<div>
							<div style="width:60px;margin:auto">
								<el-button @click="openSix(1,1)" size="mini" style="margin-top: 10px;margin-left:10px">
									开
								</el-button>
								<el-button :style="buttonSixData.btns[0].status==1 ? trueClick:falseClick" disabled="disable" size="mini">

								</el-button>
								<el-button @click="openSix(0,1)" size="mini" style="margin-top:10px">
									关
								</el-button>
							</div>

						</div>
						<!-- <span style="display: block;padding-top:10px">{{buttonSevenData[0].value}}W</span> -->
					</div>
					<div style="width:25%;float: left;text-align:center">
						<el-input v-model="buttonSixData.btns[1].text" placeholder="请输入内容" type="textarea" style="width:80%;margin-left:10%"></el-input>
						<div>
							<div style="width:60px;margin:auto">
								<el-button @click="openSix(1,2)" size="mini" style="margin-top: 10px;margin-left:10px">
									开
								</el-button>
								<el-button :style="buttonSixData.btns[1].status==1 ? trueClick:falseClick" disabled="disable" size="mini">

								</el-button>
								<el-button @click="openSix(0,2)" size="mini" style="margin-top:10px">
									关
								</el-button>

							</div>

						</div>
						<!-- <span style="display: block;padding-top:10px">{{buttonSevenData[0].value}}W</span> -->
					</div>
					<div style="width:25%;float: left;text-align:center">
						<el-input v-model="buttonSixData.btns[2].text" placeholder="请输入内容" type="textarea" style="width:80%;margin-left:10%"></el-input>
						<div>
							<div style="width:60px;margin:auto">
								<el-button @click="openSix(1,3)" size="mini" style="margin-top: 10px;margin-left:10px">
									开
								</el-button>
								<el-button :style="buttonSixData.btns[2].status==1 ? trueClick:falseClick" disabled="disable" size="mini">

								</el-button>
								<el-button @click="openSix(0,3)" size="mini" style="margin-top:10px">
									关
								</el-button>

							</div>

						</div>
						<!-- <span style="display: block;padding-top:10px">{{buttonSevenData[0].value}}W</span> -->
					</div>
					<div style="width:25%;float: left;text-align:center">
						<el-input v-model="buttonSixData.btns[3].text" placeholder="请输入内容" type="textarea" style="width:80%;margin-left:10%"></el-input>
						<div>
							<div style="width:60px;margin:auto">
								<el-button @click="openSix(1,4)" size="mini" style="margin-top: 10px;margin-left:10px">
									开
								</el-button>
								<el-button :style="buttonSixData.btns[3].status==1 ? trueClick:falseClick" disabled="disable" size="mini">

								</el-button>
								<el-button @click="openSix(0,4)" size="mini" style="margin-top:10px">
									关
								</el-button>

							</div>

						</div>
						<!-- <span style="display: block;padding-top:10px">{{buttonSevenData[0].value}}W</span> -->
					</div>

				</div>
				<div class="top_right">
					<el-row style="height: 36px;margin-bottom: 0px;color: white;font-size: 20px;padding-left: 10px;">
						<el-col :span="8">
							<div class="grid-content bg-purple">{{title}}</div>
						</el-col>
						<el-col :span="8">
							<div class="grid-content bg-purple-light"></div>
						</el-col>
						<el-col :span="8">
							<div class="grid-content bg-purple"></div>
						</el-col>
					</el-row>
					<el-row style="height: 36px;margin-bottom: 0px;font-size: 25px;color: white;font-weight: 700;">
						<el-col :span="6">
							<div class="grid-content bg-purple"></div>
						</el-col>
						<el-col :span="10">
							<div class="grid-content bg-purple-light" style="text-align: right;">{{buttonSixData.value}}cm³/s</div>
						</el-col>
						<el-col :span="8">
							<div class="grid-content bg-purple"></div>
						</el-col>
					</el-row>
					<el-row style="height: 36px;margin-bottom: 0px;font-size: 15px;color: white;">
						<el-col :span="8">
							<div class="grid-content bg-purple"></div>
						</el-col>
						<el-col :span="8">
							<div class="grid-content bg-purple-light"></div>
						</el-col>
						<el-col :span="8">
							<div class="grid-content bg-purple"></div>
						</el-col>
					</el-row>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="updataDeviceName(3)" style="margin-top:10px">保存空开设备名字</el-button>
				<el-button @click="dialogFormVisible_six = false">关闭窗口</el-button>
			</div>
		</el-dialog>

		<!--type为7的空关控制1的弹窗 :visible.sync="dialogFormVisible_six"-->
		<el-dialog :title="actionName" :visible.sync="dialogFormVisible_seven" width="90%" :close-on-click-modal="ss">
			<div class="top">
				<div class="top_left" style="width:100%">
					<div style="width:12.5%;float: left;text-align:center">
						<el-input v-model="buttonSevenData[0].text" placeholder="请输入内容" type="textarea" style="width:80%;margin-left:10%"></el-input>
						<div>
							<div style="width:60px;margin:auto">
								<el-button @click="openSeven(1,1)" size="mini" style="margin-top: 10px;margin-left:10px">
									开
								</el-button>
								<el-button :style="buttonSevenData[0].value != '0'&& buttonSevenData[0].value != ''  ? trueClick:falseClick" disabled="disable" size="mini">

								</el-button>
								<el-button @click="openSeven(0,1)" size="mini" style="margin-top:10px">
									关
								</el-button>

							</div>

						</div>
						<span style="display: block;padding-top:10px">{{buttonSevenData[0].value}}W</span>
					</div>
					<div style="width:12.5%;float: left;text-align:center">
						<el-input v-model="buttonSevenData[1].text" placeholder="请输入内容" style="width:80%;margin-left:10%" type="textarea"></el-input>
						<div>
							<div style="width:60px;margin:auto">
								<el-button @click="openSeven(1,2)" size="mini" style="margin-top: 10px;margin-left:10px">
									开
								</el-button>
								<el-button :style="buttonSevenData[1].value != '0'&&buttonSevenData[1].value != ''  ? trueClick:falseClick" disabled="disable" size="mini">

								</el-button>
								<el-button @click="openSeven(0,2)" size="mini" style="margin-top:10px">
									关
								</el-button>

							</div>

						</div>
						<span style="display: block;padding-top:10px">{{buttonSevenData[1].value}}W</span>
					</div>
					<div style="width:12.5%;float: left;text-align:center">
						<el-input v-model="buttonSevenData[2].text" placeholder="请输入内容" style="width:80%;margin-left:10%" type="textarea"></el-input>
						<div>
							<div style="width:60px;margin:auto">
								<el-button @click="openSeven(1,3)" size="mini" style="margin-top: 10px;margin-left:10px">
									开
								</el-button>
								<el-button :style="buttonSevenData[2].value != '0'&&buttonSevenData[2].value != '' ? trueClick:falseClick" disabled="disable" size="mini">

								</el-button>
								<el-button @click="openSeven(0,3)" size="mini" style="margin-top:10px">
									关
								</el-button>

							</div>

						</div>
						<span style="display: block;padding-top:10px">{{buttonSevenData[2].value}}W</span>
					</div>
					<div style="width:12.5%;float: left;text-align:center">
						<el-input v-model="buttonSevenData[3].text" placeholder="请输入内容" style="width:80%;margin-left:10%" type="textarea"></el-input>
						<div>
							<div style="width:60px;margin:auto">
								<el-button @click="openSeven(1,4)" size="mini" style="margin-top: 10px;margin-left:10px">
									开
								</el-button>
								<el-button :style="buttonSevenData[3].value != '0'&&buttonSevenData[3].value != '' ? trueClick:falseClick" disabled="disable" size="mini">

								</el-button>
								<el-button @click="openSeven(0,4)" size="mini" style="margin-top:10px">
									关
								</el-button>

							</div>

						</div>
						<span style="display: block;padding-top:10px">{{buttonSevenData[3].value}}W</span>
					</div>
					<div style="width:12.5%;float: left;text-align:center">
						<el-input v-model="buttonSevenData[4].text" placeholder="请输入内容" style="width:80%;margin-left:10%" type="textarea"></el-input>
						<div>
							<div style="width:60px;margin:auto">
								<el-button @click="openSeven(1,5)" size="mini" style="margin-top: 10px;margin-left:10px">
									开
								</el-button>
								<el-button :style="buttonSevenData[4].value != '0'&&buttonSevenData[4].value != ''  ? trueClick:falseClick" disabled="disable" size="mini">

								</el-button>
								<el-button @click="openSeven(0,5)" size="mini" style="margin-top:10px">
									关
								</el-button>

							</div>

						</div>
						<span style="display: block;padding-top:10px">{{buttonSevenData[4].value}}W</span>
					</div>
					<div style="width:12.5%;float: left;text-align:center">
						<el-input v-model="buttonSevenData[5].text" placeholder="请输入内容" style="width:80%;margin-left:10%" type="textarea"></el-input>
						<div>
							<div style="width:60px;margin:auto">
								<el-button @click="openSeven(1,6)" size="mini" style="margin-top: 10px;margin-left:10px">
									开
								</el-button>
								<el-button :style="buttonSevenData[5].value != '0'&&buttonSevenData[5].value != ''  ? trueClick:falseClick" disabled="disable" size="mini">

								</el-button>
								<el-button @click="openSeven(0,6)" size="mini" style="margin-top:10px">
									关
								</el-button>

							</div>

						</div>
						<span style="display: block;padding-top:10px">{{buttonSevenData[5].value}}W</span>
					</div>
					<div style="width:12.5%;float: left;text-align:center">
						<el-input v-model="buttonSevenData[6].text" placeholder="请输入内容" type="textarea" style="width:80%;margin-left:10%"></el-input>
						<div>
							<div style="width:60px;margin:auto">
								<el-button @click="openSeven(1,7)" size="mini" style="margin-top: 10px;margin-left:10px">
									开
								</el-button>
								<el-button :style="buttonSevenData[6].value != '0'&&buttonSevenData[6].value != ''  ? trueClick:falseClick" disabled="disable" size="mini">

								</el-button>
								<el-button @click="openSeven(0,7)" size="mini" style="margin-top:10px">
									关
								</el-button>

							</div>

						</div>
						<span style="display: block;padding-top:10px">{{buttonSevenData[6].value}}W</span>
					</div>
					<div style="width:12.5%;float: left;text-align:center">
						<el-input v-model="buttonSevenData[7].text" placeholder="请输入内容" style="width:80%;margin-left:10%" type="textarea"></el-input>
						<div>
							<div style="width:60px;margin:auto">
								<el-button @click="openSeven(1,8)" size="mini" style="margin-top: 10px;margin-left:10px">
									开
								</el-button>
								<el-button :style="buttonSevenData[7].value != '0'&&buttonSevenData[7].value != ''  ? trueClick:falseClick" disabled="disable" size="mini">

								</el-button>
								<el-button @click="openSeven(0,8)" size="mini" style="margin-top:10px">
									关
								</el-button>

							</div>

						</div>
						<span style="display: block;padding-top:10px">{{buttonSevenData[7].value}}W</span>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer" style="margin-top:10px">
				<el-button @click="updataDeviceName(1)" style="margin-top:10px">保存空开设备名字</el-button>
				<el-button @click="closeDeviceName()" style="margin-top:10px">关闭窗口</el-button>
			</div>
		</el-dialog>

		<!--type为8的空关控制2的弹窗 :visible.sync="dialogFormVisible_six"-->
		<el-dialog :title="actionName" :visible.sync="dialogFormVisible_even" :close-on-click-modal="ss">
			<div class="top">
				<div class="top_left" style="width:100%">
					<div style="width:50%;float: left;text-align:center">
						<el-input v-model="buttonEvenData.btns[0].text" placeholder="请输入内容" style="width:80%;margin-left:10%"></el-input>
						<!-- <el-switch
              v-model="buttonEvenData.btns[0].status"
              style="padding-top:10px"
              active-color="#13ce66"
              inactive-color="#ff4949"
              v-on:change="subthreeChangeType($event,1,8)"
              active-text="开"
              inactive-text="关"
            ></el-switch> -->

						<div style="width:60px;margin:auto">
							<el-button @click="openSeven(0,1)" size="mini" style="margin-top: 10px;margin-left:10px">
								开
							</el-button>
							<el-button :style="buttonEvenData.btns[0].value != '0' ? trueClick:falseClick" disabled="disable" size="mini">

							</el-button>
							<el-button @click="openSeven(1,1)" size="mini" style="margin-top:10px">
								关
							</el-button>

						</div>

						<span style="display: block;padding-top:10px">{{buttonEvenData.btns[0].value}}W</span>
						<div style="width:100%">
							<span style="display: block;padding-top:10px;float:left;width:25%">{{buttonEvenData.values[0]}}</span>
							<span style="display: block;padding-top:10px;float:left;width:25%">{{buttonEvenData.values[1]}}</span>
							<span style="display: block;padding-top:10px;float:left;width:25%">{{buttonEvenData.values[2]}}</span>
							<span style="display: block;padding-top:10px;float:left;width:25%">{{buttonEvenData.values[3]}}</span>
						</div>
					</div>
					<div style="width:50%;float: left;text-align:center">
						<el-input v-model="buttonEvenData.btns[1].text" placeholder="请输入内容" style="width:80%;margin-left:10%"></el-input>
						<!-- <el-switch
              v-model="buttonEvenData.btns[1].status"
              style="padding-top:10px"
              active-color="#13ce66"
              inactive-color="#ff4949"
              v-on:change="subthreeChangeType($event,2,8)"
              active-text="开"
              inactive-text="关"
            ></el-switch> -->
						<div style="width:60px;margin:auto">
							<el-button @click="openSeven(1,2)" size="mini" style="margin-top: 10px;margin-left:10px">
								开
							</el-button>
							<el-button :style="buttonEvenData.btns[1].value != '0' ? trueClick:falseClick" disabled="disable" size="mini">

							</el-button>
							<el-button @click="openSeven(0,2)" size="mini" style="margin-top:10px">
								关
							</el-button>
						</div>
						<span style="display: block;padding-top:10px">{{buttonEvenData.btns[1].value}}W</span>
						<div style="width:100%">
							<span style="display: block;padding-top:10px;float:left;width:25%">{{buttonEvenData.values[4]}}</span>
							<span style="display: block;padding-top:10px;float:left;width:25%">{{buttonEvenData.values[5]}}</span>
							<span style="display: block;padding-top:10px;float:left;width:25%">{{buttonEvenData.values[6]}}</span>
							<span style="display: block;padding-top:10px;float:left;width:25%">{{buttonEvenData.values[7]}}</span>
						</div>
					</div>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="updataDeviceName(2)" style="margin-top:10px">保存空开设备名字</el-button>
				<el-button @click="closeEventAlert()" style="margin-top:10px">关闭窗口</el-button>
			</div>
		</el-dialog>

		<!-- 子设备的弹窗 -->
		<el-dialog title="详情" :visible.sync="dialogFormVisible" :close-on-click-modal="ss">
			<div class="top">
				<div class="top_left">
					<div style="width:20%;float: left;text-align:center" v-for="item in subDev.btn">
						<el-switch v-model="item.btnState" active-color="#13ce66" inactive-color="#ff4949" v-on:change="subChangeType(item)" active-text="开" inactive-text="关"></el-switch>
						<span style="display: block;padding-top:10px">{{item.btnValue}}</span>
					</div>
				</div>
				<div class="top_right">
					<el-row style="height: 36px;margin-bottom: 0px;color: white;font-size: 20px;padding-left: 10px;">
						<el-col :span="8">
							<div class="grid-content bg-purple">{{title}}</div>
						</el-col>
						<el-col :span="8">
							<div class="grid-content bg-purple-light"></div>
						</el-col>
						<el-col :span="8">
							<div class="grid-content bg-purple"></div>
						</el-col>
					</el-row>
					<el-row style="height: 36px;margin-bottom: 0px;font-size: 25px;color: white;font-weight: 700;">
						<el-col :span="6">
							<div class="grid-content bg-purple"></div>
						</el-col>
						<el-col :span="10">
							<div class="grid-content bg-purple-light">{{subDevValue}}</div>
						</el-col>
						<el-col :span="8">
							<div class="grid-content bg-purple"></div>
						</el-col>
					</el-row>
					<el-row style="height: 36px;margin-bottom: 0px;font-size: 15px;color: white;">
						<el-col :span="8">
							<div class="grid-content bg-purple"></div>
						</el-col>
						<el-col :span="8">
							<div class="grid-content bg-purple-light"></div>
						</el-col>
						<el-col :span="8">
							<div class="grid-content bg-purple">{{unit}}</div>
						</el-col>
					</el-row>
					<!--<span style="width: 100%;height: 33.3%;"></span>
					<!--<span style="width: 100%;height: 33.3%;">{{subDev.value.value}}</span>
          <span style="width: 100%;height: 33.3%;">{{subDev.value.unit}}</span>-->
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogFormVisible = false">关闭窗口</el-button>
			</div>
		</el-dialog>
	</div>
	</div>
</template>
<script>
	import VueDragResize from "vue-drag-resize";
	export default {
		components: {
			VueDragResize
		},
		data() {
			return {
				ss: false,
				roomName: "我的房间",
				oldTop:"",
			    oldleft:"",
				kongtiaoFormVisible: false,
				kongTiaoShowData: {
					strongWind: "",
					swing: "",
					cold: "",
					temp: ""
				},
				typeSevenName: "", //type为7的弹窗标题名
				needButtonEvenData: [],
				needButtonSevenData: [],
				needButtonSixData: [],
				kongkaiId: "",
				shuiliuId: "",
				dialogFormVisible_six: false,
				dialogFormVisible_seven: false,
				dialogFormVisible_even: false,
				ktIsFirst: true,
				buttonSevenData: [{
						id: "1",
						value: "0",
						status: "1",
						text: ""
					},
					{
						id: "2",
						value: "0",
						status: "1",
						text: ""
					},
					{
						id: "3",
						value: "0",
						status: "1",
						text: ""
					},
					{
						id: "4",
						value: "0",
						status: "1",
						text: ""
					},
					{
						id: "5",
						value: "0",
						status: "1",
						text: ""
					},
					{
						id: "6",
						value: "0",
						status: "1",
						text: ""
					},
					{
						id: "7",
						value: "0",
						status: "1",
						text: ""
					},
					{
						id: "8",
						value: "0",
						status: "1",
						text: ""
					}
				],
				buttonSixData: {
					btns: [{
							id: "1",
							status: 0,
							text: "",
							value: "",
						},
						{
							id: "2",
							status: 0,
							text: "",
							value: "",
						},
						{
							id: "3",
							status: 0,
							text: "",
							value: "",
						},
						{
							id: "4",
							status: 0,
							text: "",
							value: "",
						}
					],
					value: ""
				},
				buttonEvenData: {
					btns: [{
							id: "1",
							value: "0",
							status: "1",
							text: ""
						},
						{
							id: "2",
							value: "0",
							status: "1",
							text: "空调1"
						}
					],
					values: ["0", "0", "0", "0", "0", "0", "0", "0"]
				},
				clValue: "窗帘",
				ykqData: {
					DeviceID: "",
					ActionName: ""
				},
				ktData: {
					DeviceID: "",
					ActionName: ""
				},
				logicId: "", //设备id
				timer: "", //定时器方法
				getListTimer: "", //获取设备列表的定时器
				//kongtiaoBackGround:"url(" + require("../assets/RemoteControl.png") + ")",
				note: {
					backgroundImage: "url(" + require('../assets/RemoteControl.png') + ")",
					backgroundRepeat: "no-repeat",
					backgroundSize: "100%",
					marginTop: "5px"
				},
				trueClick: {
					background: "red"
				},
				falseClick: {
					background: "#b0b0b0"
				},
				moveStyle: {
					background: "",
					opacity: "1"
				},
				yaoKongBack: {
					backgroundImage: "url(" + require("../assets/anniu.png") + ")",
					backgroundRepeat: "no-repeat",
					backgroundSize: "100%",
					marginTop: "5px"
				},
				kongtiao_dialogFormVisible: false, //空调的弹窗
				yaokongqi_dialogFormVisible: false, //遥控器的弹窗
				subDev: [],
				title: "", //标题
				unit: "", //标点符号
				subDevValue: "", //使用量
				dialogFormVisible: false,
				value2: true,
				needUpdateData: [], //保存要每5秒更新的数据
				backgroundDiv: {
					backgroundImage: ""
				},
				getSubDev_parent: "", //获取子设备需要的parentID
				allBackgroundImg: "",
				listWidth: 0,
				listHeight: 0,
				choseData: {},
				needWidth: 0,
				needHeight: 0,
				width: 0,
				height: 0,
				top: 0,
				left: 0,
				getTypeSeven_timer: "",
				getTypeEvent_timer: "",
				getBuildData: {
					BuildID: "",
					GateWaysID: "",
					TypesID: "",
					Pager: "",
					PageIndex: "",
					PageSize: ""
				},
				updateData: {
					DeviceID: "",
					x: "",
					y: ""
				},
				getRoomData: {
					ID: ""
				},
				deviceData: [],
				edd: ""
			};
		},

		methods: {
			//type7的关闭窗口
			closeDeviceName() {
				this.dialogFormVisible_seven = false;
				if(this.getTypeSeven_timer) {
					//如果定时器还在运行 或者直接关闭，不用判断
					clearInterval(this.getTypeSeven_timer); //关闭
				}
			},
			//type8的关闭窗口
			closeEventAlert() {
				this.dialogFormVisible_even = false
				if(this.getTypeEvent_timer) {
					//如果定时器还在运行 或者直接关闭，不用判断
					clearInterval(this.getTypeSeven_timer); //关闭
				}

			},
			//水流量的点击
			openSix(status, id) {
				let type1 = 0;
				let num = id - 1;

				if(status == 1) {
					type1 = 1;
					this.buttonSixData.btns[num].status = 1;
				} else {
					type1 = 0;
					this.buttonSixData.btns[num].status = 0;
				}

				this.updatedShuiLiu(id, type1, this.shuiliuId);
			},
			//空开一的点击
			openSeven(status, id) {
				debugger
				// if(status == '1'){
				//    status = '0'
				// }else{
				//    status = '1'
				// }
				// switch(id){
				//   case 1:this.buttonSevenData[0].status = status;break;
				//   case 2:this.buttonSevenData[1].status = status;break;
				//   case 3:this.buttonSevenData[2].status = status;break;
				//   case 4:this.buttonSevenData[3].status = status;break;
				//   case 5:this.buttonSevenData[4].status = status;break;
				//   case 6:this.buttonSevenData[5].status = status;break;
				//   case 7:this.buttonSevenData[6].status = status;break;
				//   case 8:this.buttonSevenData[7].status = status;break;
				// }

				this.updatedKontkai(id, status, this.kongkaiId);
			},
			//窗帘
			cl(e) {
				let data = {
					DeviceID: this.logicId,
					ActionName: ""
				};
				if(e == 1) {
					data.ActionName = "open";
					this.clValue = "窗帘(打开)";
				} else if(e == 0) {
					data.ActionName = "pause";
					this.clValue = "窗帘(暂停)";
				} else {
					data.ActionName = "close";
					this.clValue = "窗帘(关闭)";
				}
				this.updateDeviceStat(data);
			},
			activateEv(e){
				debugger
			},
			//更改设备名字
			updataDeviceName(type) {
				if(type == 1) {
					for(let i = 0; i < this.needButtonSevenData.length; i++) {
						var index = i + 1;
						this.setKKName(this.needButtonSevenData[i].text, index, this.kongkaiId);
					}
				} else if(type == 2) {
					for(let i = 0; i < this.needButtonEvenData.btns.length; i++) {
						var index = i + 1;
						this.setKKName(this.needButtonEvenData.btns[i].text, index, this.kongkaiId);
					}
				} else {
					debugger
					for(let i = 0; i < this.needButtonSixData.btns.length; i++) {
						var index = i + 1;
						this.setKKName(this.needButtonSixData.btns[i].text, index, this.kongkaiId);
					}
				}
			},
			//获取空调的一些值
			getDetaultCode(id) {
				var data = {
					DevId: id
				}
				this.$httpRequest.post('api/DeviceApi/GetDefaultCode', data, res => {
					debugger
					this.kongTiaoShowData = res.data
				})
			},
			//更改空开按钮1，2开关
			updatedKontkai(id, type, deviceId) {
				let updateData = {
					status: type,
					btnId: id,
					DevID: deviceId
				};
				this.$httpRequest.post("api/Device/AirSwitchCmd", updateData, res => {
					if(res.isSuccess) {
						this.$notify({
							title: "更新设备状态成功",
							message: "",
							type: "success",
							duration: 500
						});
					} else {
						this.$notify({
							title: "更新设备状态失败",
							message: response.msg,
							type: "error",
							duration: 500
						});
					}
				});
			},
			//更改水流量的状态
			updatedShuiLiu(id, type, deviceId) {
				let updateData = {
					status: type,
					btnId: id,
					DevID: deviceId
				};
				this.$httpRequest.post("api/Device/WaterSwitchCmd", updateData, res => {
					if(res.isSuccess) {
						this.$notify({
							title: "更新设备状态成功",
							message: "",
							type: "success",
							duration: 500
						});
					} else {
						this.$notify({
							title: "更新设备状态失败",
							message: response.msg,
							type: "error",
							duration: 500
						});
					}
				});
			},
			//空开按钮和水流量的开关的点击事件
			subthreeChangeType($event, id, type) {
				if(type == 6) {
					//水流量
					let type1 = 0;
					if($event) {
						type1 = 1;
					} else {
						type1 = 0;
					}
					this.updatedShuiLiu(id, type1, this.shuiliuId);
				} else {
					let type1 = 0;
					if($event) {
						type1 = 1;
					} else {
						type1 = 0;
					}
					this.updatedKontkai(id, type1, this.kongkaiId);
				}
			},
			//每个图标的点击
			showModal(e) {
				debugger
				//0是开关,1是弹窗，2是遥控器,3:空调,6:水流声,7:空开控制器1,8：空开控制器2，5是空调
				switch(e.btnType) {
					// this.yaokongqi_dialogFormVisible = true;
					// break;
					case "1":
						this.dialogFormVisible = true;
						this.getSubDev_parent = e.id;
						this.getSubDev(e.code);
						break;
					case "3"://空调
						this.logicId = e.id;
						this.ktData.DeviceID = this.logicId;
						this.ktIsFirst = true;
						this.kongtiao_dialogFormVisible = true;
						this.getDetaultCode(this.logicId);
						break;
					case "2":
						this.logicId = e.id;
						this.ykqData.DeviceID = this.logicId;
						this.yaokongqi_dialogFormVisible = true;
						break;
					case "5":
						this.logicId = e.id;
						this.kongtiaoFormVisible = true;
						break;
					case "6":
						this.kongkaiId = e.id;
						this.dialogFormVisible_six = true;
						this.shuiliuId = e.id;
						var status = '';
						if(e.status == -1) {
							status = "离线"
						} else {
							status = '在线'
						}
							this.actionName = e.name + '(' + status + ')';
						this.buttonSixData = [];
						this.getTypeSix(e.id);
						break;
					case "7":
						var status = '';
						if(e.status == -1) {
							status = "离线"
						} else {
							status = '在线'
						}
						this.kongkaiId = e.id;
						this.actionName = e.name + '(' + status + ')';
						this.dialogFormVisible_seven = true;
						this.buttonSevenData = [];
						this.getTypeSeven_timer = setInterval(this.getTypeSeven(e.id), 300000);
						this.getTypeSeven(e.id);
						break;
					case "8":
						var status = ''
						if(e.status == -1) {
							status = "离线"
						} else {
							status = '在线'
						}
						this.kongkaiId = e.id;
						this.actionName = e.name + '(' + status + ')';
						this.dialogFormVisible_even = true;
						this.getTypeEvent_timer = setInterval(this.getTypeEvent(e.id), 300000);
						this.buttonEvenData = [];
						this.getTypeEvent(e.id);
						break;
				}
			},
			//type为6获取水流量的
			getTypeSix(id) {
				var data = {
					DevID: id
				};
				this.$httpRequest.get("api/Device/GetWater", data, response => {
					if(response.data.length == 0) {
						var data1 = {
							btns: [{
									id: "1",
									status: "1",
									text: ""
								},
								{
									id: "2",
									status: "1",
									text: ""
								},
								{
									id: "3",
									status: "1",
									text: ""
								},
								{
									id: "4",
									status: "1",
									text: ""
								}
							],
							value: 30
						};
						this.buttonSixData = data1;
					} else {
						this.buttonSixData = response.data;
					}
				});
			},
			//type为7的获取空开1
			getTypeSeven(id) {
				var data = {
					DevID: id
				};
				this.$httpRequest.get("api/Device/GetAir1", data, response => {
					if(response.data.length == 0) {
						var data1 = [{
								id: "1",
								value: "0",
								status: "1",
								text: ""
							},
							{
								id: "2",
								value: "0",
								status: "1",
								text: ""
							},
							{
								id: "3",
								value: "0",
								status: "1",
								text: ""
							},
							{
								id: "4",
								value: "0",
								status: "1",
								text: ""
							},
							{
								id: "5",
								value: "0",
								status: "1",
								text: ""
							},
							{
								id: "6",
								value: "0",
								status: "1",
								text: ""
							},
							{
								id: "7",
								value: "0",
								status: "1",
								text: ""
							},
							{
								id: "8",
								value: "0",
								status: "1",
								text: ""
							}
						];
						this.buttonSevenData = data1;
					} else {
						debugger
						this.buttonSevenData = response.data;
					}
				});
			},
			//type为8的获取空开2
			getTypeEvent(id) {
				var data = {
					DevID: id
				};
				this.$httpRequest.get("api/Device/GetAir2", data, response => {
					if(response.data.length == 0) {
						var data = {
							btns: [{
									id: "1",
									value: "0",
									status: "1",
									text: ""
								},
								{
									id: "2",
									value: "0",
									status: "1",
									text: "空调1"
								}
							],
							values: ["0", "0", "0", "0", "0", "0", "0", "0"]
						};
						this.buttonEvenData = data;
					} else {
						response.data.values = JSON.parse(response.data.values);
						this.buttonEvenData = response.data;
					}
				});
			},
			//设置空开名字
			setKKName(name, id, index) {
				var senData = {
					DevId: index,
					Index: id,
					Name: name
				}
				this.$httpRequest.post('api/Device/SetAirName', senData, res => {
					if(res.isSuccess) {
						this.$notify({
							title: "更新设备名字",
							message: "",
							type: "success",
							duration: 500
						});
					} else {
						this.$notify({
							title: "更新设备名字",
							message: response.msg,
							type: "error",
							duration: 500
						});
					}
				})
			},

			//改变空调的状态的请求
			updateKTDevice() {
				debugger
				var data = {
					DevId: this.logicId,
					StrongWind: this.kongTiaoShowData.strongWind,
					swing: this.kongTiaoShowData.swing,
					cold: this.kongTiaoShowData.cold,
					temp: this.kongTiaoShowData.temp
				}
				this.$httpRequest.post('api/DeviceApi/ExecAir', data, res => {
					if(res.isSuccess) {
						this.$notify({
							title: "更新状态",
							message: '成功',
							type: 'success',
							duration: 500
						})
					} else {
						this.$notify({
							title: "更新设备名字失败",
							message: response.msg,
							type: "error",
							duration: 500
						});
					}
				})
			},
			//空调的按钮
			// ktStart() {
			//   this.ktData.ActionName = "open";
			//   this.updateDeviceStat(this.ktData);
			// },
			ktClose() {
				if(this.ktIsFirst) {
					this.ktData.ActionName = "空调关";
					this.updateDeviceStat(this.ktData);
					this.ktIsFirst = false;
				} else {
					this.ktIsFirst = true;
					this.kongtiaoOpen();
				}
			},
			//空调开的方法
			kongtiaoOpen(){
				var data = {
					DevId:this.logicId
				}
              this.$httpRequest.post("api/DeviceApi/Open",data,res=>{
				  if(res.isSuccess){
					this.$notify({
							title: "更新设备状态成功",
							message: res.msg,
							type: "success",
							duration: 500
						});  
				  }else{
					  this.$notify({
							title: "更新设备状态失败",
							message: res.msg,
							type: "error",
							duration: 500
						});
				  }
			  })
			},
			ktMoshi() {
				this.kongTiaoShowData.cold = !this.kongTiaoShowData.cold;
				this.updateKTDevice();
			},

			ktWdAdd() {
				// this.ktData.ActionName = "温度+";
				// this.updateDeviceStat(this.ktData);
				this.kongTiaoShowData.temp = parseInt(this.kongTiaoShowData.temp) + 1;
				this.updateKTDevice();
			},
			ktWdUp() {
				this.kongTiaoShowData.temp = parseInt(this.kongTiaoShowData.temp) - 1;
				this.updateKTDevice();
			},
			ktFs() {
				this.kongTiaoShowData.strongWind = !this.kongTiaoShowData.strongWind;
				this.updateKTDevice();
			},
			ktFx() {
				this.kongTiaoShowData.swing = !this.kongTiaoShowData.swing;
				this.updateKTDevice();
			},
			//遥控器的按钮
			ykqMenu() {
				this.ykqData.ActionName = "菜单";
				this.updateDeviceStat(this.ykqData);
			},
			ykqSure() {
				this.ykqData.ActionName = "确定";
				this.updateDeviceStat(this.ykqData);
			},
			ykqPower() {
				this.ykqData.ActionName = "电源";
				this.updateDeviceStat(this.ykqData);
			},
			ykqBack() {
				this.ykqData.ActionName = "返回";
				this.updateDeviceStat(this.ykqData);
			},
			ykqUp() {
				this.ykqData.ActionName = "上";
				this.updateDeviceStat(this.ykqData);
			},
			ykqRight() {
				this.ykqData.ActionName = "右";
				this.updateDeviceStat(this.ykqData);
			},
			ykqDown() {
				this.ykqData.ActionName = "下";
				this.updateDeviceStat(this.ykqData);
			},
			ykqLeft() {
				this.ykqData.ActionName = "左";
				this.updateDeviceStat(this.ykqData);
			},
			Up() {
				this.ykqData.ActionName = "频道+";
				this.updateDeviceStat(this.ykqData);
			},
			Right() {
				this.ykqData.ActionName = "音量+";
				this.updateDeviceStat(this.ykqData);
			},
			Down() {
				this.ykqData.ActionName = "频道-";
				this.updateDeviceStat(this.ykqData);
			},
			Left() {
				this.ykqData.ActionName = "音量-";
				this.updateDeviceStat(this.ykqData);
			},

			//详情每个开关的设置
			infoChangeType(e) {
				for(let i = 0; i < this.subDev.btn.length; i++) {
					if(this.subDev.btn[i].id == e.id) {
						this.subDev.btn[i].btnType = !this.subDev.btn[i].btnType;
						if(this.subDev.btn[i].btnType) {
							this.subDev.btn[i].btnState = "close";
						} else {
							this.subDev.btn[i].btnState = "open";
						}
					}
				}
				this.subDev = this.subDev;
			},
			//获取子集设备
			getSubDev(parentId) {
				var that = this;
				let data = {
					logicId: parentId
				};
				this.subDev = [];
				this.$httpRequest.get("api/Device/GetAirStatus", data, response => {
					if(response.isSuccess) {
						var that = this;
						this.subDev = response.data;
						this.title = this.subDev.value.title;
						this.unit = this.subDev.value.unit;
						this.subDevValue = this.subDev.value.value;
						for(let i = 0; i < that.subDev.btn.length; i++) {
							if(that.subDev.btn[i].btnState == "open") {
								//开启的状态
								that.subDev.btn[i].btnState = true;
							} else {
								//关闭的状态
								that.subDev.btn[i].btnState = false;
							}
						}
					}
				});
			},
			//子设备更改
			subChangeType(e) {
				var updateData = {
					DeviceID: e.id,
					ActionName: ""
				};
				if(e.btnState) {
					updateData.ActionName = "open";
				} else {
					updateData.ActionName = "close";
				}
				var that = this;
				that.$httpRequest.post("api/Device/Exec", updateData, response => {
					if(response.isSuccess) {
						this.$notify({
							title: "更新设备状态成功",
							message: response.msg,
							type: "success",
							duration: 500
						});
					} else {
						this.$notify({
							title: "更新设备状态失败",
							message: response.msg,
							type: "error",
							duration: 500
						});
					}
					//this.getSubDev(this.getSubDev_parent);
				});
			},
			//更新设备的
			updateDeviceStat(data) {
				this.$httpRequest.post("api/Device/Exec", data, response => {
					if(response.isSuccess) {
						this.$notify({
							title: "更新设备状态成功",
							message: response.msg,
							type: "success",
							duration: 500
						});
					} else {
						this.$notify({
							title: "更新设备状态失败",
							message: response.msg,
							type: "error",
							duration: 500
						});
					}
				});
			},
			//鼠标移上去显示
			dataDetails(arr) {
				for(let i = 0; i < this.deviceData.length; i++) {
					if(arr.id == this.deviceData[i].id) {
						this.deviceData[i].isShowEnd = true;
						this.deviceData[i].moveStyle.background = "white";
						this.deviceData[i].moveStyle.opacity = "1";
					} else {
						this.deviceData[i].isShowEnd = false;
						this.deviceData[i].moveStyle.background = "";
						this.deviceData[i].moveStyle.opacity = "1";
					}
				}
			},
			//鼠标移除后隐藏
			hiddenDetail(arr) {
				for(let i = 0; i < this.deviceData.length; i++) {
					this.deviceData[i].isShowEnd = false;
					this.deviceData[i].moveStyle.background = "";
					this.deviceData[i].moveStyle.opacity = "1";
				}
			},
			other() {
				alert("我点击其他的");
			},
			changeType12() {
				alert("我对对对");
			},
			moveIng(newRect){
			 
			},
			//点击下去记录
			dragging(newRect,index){
             
			},
			//点击结束记录
			resize(newRect, index) {
				this.width = newRect.width;
				this.height = newRect.height;
				this.choseData = this.deviceData[index];
                this.updateData.DeviceID = this.choseData.id;
				var width = this.listWidth.substr(0, this.listWidth.indexOf("px"));
				var height = this.listHeight.substr(0, this.listHeight.indexOf("px"));
				this.top = newRect.top;
				this.left = newRect.left;
				this.updateData.x = this.left / width;
				this.updateData.y = this.top / height;
				 console.log(this.top)
					console.log(this.left)
				 console.log(this.choseData.location_Y)
					console.log(this.choseData.location_X)
						 console.log(this.choseData.location_Y + 10 < this.top)
					console.log(this.choseData.location_Y - 10 > this.top)
				 console.log(this.choseData.location_X + 10 <this.left)
					console.log(this.choseData.location_X - 10 < this.left)
					console.log((this.choseData.location_Y + 10 > this.top || this.choseData.location_Y - 10 < this.top) && (this.choseData.location_X + 10 >this.left || this.choseData.location_X - 10 < this.left))
				if((this.choseData.location_Y + 10 > this.top && this.choseData.location_Y - 10 < this.top) && (this.choseData.location_X + 10 >this.left && this.choseData.location_X - 10 < this.left)){//代表的点击的状态
		           switch(this.choseData.btnType) {
					// this.yaokongqi_dialogFormVisible = true;
					// break;
					case "1":
						this.dialogFormVisible = true;
						this.getSubDev_parent = this.choseData.id;
						this.getSubDev(this.choseData.code);
						break;
					case "3":
						this.logicId = this.choseData.id;
						this.ktData.DeviceID = this.logicId;
						this.ktIsFirst = true;
						this.kongtiao_dialogFormVisible = true;
						this.getDetaultCode(this.logicId);
						break;
					case "2":
						this.logicId = this.choseData.id;
						this.ykqData.DeviceID = this.logicId;
						this.yaokongqi_dialogFormVisible = true;
						break;
					case "5":
						this.logicId = this.choseData.id;
						this.kongtiaoFormVisible = true;
						break;
					case "6":
						this.kongkaiId = this.choseData.id;
						this.dialogFormVisible_six = true;
						this.shuiliuId = this.choseData.id;
						var status = '';
						if(this.choseData.status == -1) {
							status = "离线"
						} else {
							status = '在线'
						}
							this.actionName = this.choseData.name + '(' + status + ')';
						this.buttonSixData = [];
						this.getTypeSix(this.choseData.id);
						break;
					case "7":
						var status = '';
						if(this.choseData.status == -1) {
							status = "离线"
						} else {
							status = '在线'
						}
						this.kongkaiId = this.choseData.id;
						this.actionName = this.choseData.name + '(' + status + ')';
						this.dialogFormVisible_seven = true;
						this.buttonSevenData = [];
						this.getTypeSeven_timer = setInterval(this.getTypeSeven(this.choseData.id), 300000);
						this.getTypeSeven(this.choseData.id);
						break;
					case "8":
						var status = ''
						if(this.choseData.status == -1) {
							status = "离线"
						} else {
							status = '在线'
						}
						this.kongkaiId = this.choseData.id;
						this.actionName = this.choseData.name + '(' + status + ')';
						this.dialogFormVisible_even = true;
						this.getTypeEvent_timer = setInterval(this.getTypeEvent(this.choseData.id), 300000);
						this.buttonEvenData = [];
						this.getTypeEvent(this.choseData.id);
						break;
				}
				}else{
				this.updataDevice();
				}
			},
			//开关的选择事件
			switch_change(e, data) {
			},
			changeType(e) {
				var updateData = {
					DeviceID: e.id,
					ActionName: ""
				};
				if(e.buttonType) {
					updateData.ActionName = "open";
				} else {
					updateData.ActionName = "close";
				}
				var that = this;
				that.$httpRequest.post("api/Device/Exec", updateData, response => {
					this.getDevice();
				});
			},
			sure() {
				this.updataDevice();
			},
			//点击每个控件弹出框
			showItem(e) {
				alert("我点击啦");
			},
			//获取当前id下的房间
			getRoom() {
				var that = this;
				that.$httpRequest.get(
					"api/Build/GetBuild",
					that.getRoomData,
					response => {
						if(response.isSuccess) {
							var allBackgroundImg = response.data.image;
							that.backgroundDiv.backgroundImage = allBackgroundImg;
						}
					}
				);
			},
			//更改设备位置的方法
			updataDevice() {
				this.$httpRequest.post(
					"api/Device/UpdateLoaction",
					this.updateData,
					response => {
						this.getDevice();
					}
				);

			},
			//每5秒请求数据的
			execData(data) {
				this.$httpRequest.post("api/Device/Exec", data, response => {});
			},
			showChoseBuild(el){
			  debugger
			 this.$router.push({path: '/buildSetting', query: {id: el.id,name:el.name,buildType:"",parentId:""}});
			},
			//获取设备的
			getDevice() {
				var that = this;
				this.$httpRequest.get(
					"api/Device/GetList",
					this.getBuildData,
					response => {
						if(response.isSuccess) {
							this.deviceData = [];
							let deviceData = response.data;
							for(let i = 0; i < deviceData.length; i++) {
								deviceData[i].location_X =
									this.needWidth * deviceData[i].location_X;
								deviceData[i].location_Y = deviceData[i].location_Y =
									this.needHeight * deviceData[i].location_Y;
								deviceData[i].img = "../assets/deng.png";
								deviceData[i].isShowEnd = false;
								deviceData[i].moveStyle = {
									background: "",
									opacity: ""
								};
								deviceData[i].moveStyle.background = "";
								deviceData[i].moveStyle.opacity = "1";
								that.deviceData[i];
								//循环判断他是button类型的
								for(let i = 0; i < deviceData.length; i++) {
									if(deviceData[i].btnType == 0) {
										if(deviceData[i].status == 0) {
											deviceData[i].buttonType = false;
										} else {
											deviceData[i].buttonType = true;
										}
									}
								}
								this.deviceData.push(deviceData[i]);
								console.log("我数据push进去");
							}
							//循环判断他拿数据每5秒请求的
							for(let i = 0; i < deviceData.length; i++) {
								for(let j = 0; j < deviceData[i].actions.length; j++) {
									if(deviceData[i].actions[j].autoExec == 1) {
										var data = {
											deviceId: "",
											actionName: ""
										};
										data.deviceId = deviceData[i].id;
										data.actionName = deviceData[i].actions[j].name;
										that.needUpdateData.push(data);
									}
								}
							}
							// 				this.timer = setInterval(() => {
							// 							console.log(new Date() + "时间");
							// 							console.log(this.needUpdateData);
							//       	for(let i = 0; i < this.needUpdateData.length; i++) {
							// 		var data = {
							// 			DeviceID: "",
							// 			ActionName: ""
							// 		};
							// 		data.DeviceID = this.needUpdateData[i].deviceId;
							// 		data.ActionName = this.needUpdateData[i].actionName;
							// 		this.execData(data);
							// 	}
							// }, 5000);
						} else {
							this.dialogFormVisible = false;
							this.$notify({
								title: "获取设备失败",
								message: response.msg,
								type: "error",
								duration: 500
							});
						}
					}
				);
			}
		},
		updated: function() {},
		beforeDestroy() {
			if(this.timer) {
				//如果定时器还在运行 或者直接关闭，不用判断
				clearInterval(this.timer); //关闭
			}
		},
		watch: {
			buttonSevenData: { //深度监听，可监听到对象、数组的变化
				handler(val, oldVal) {
					this.needButtonSevenData = val;
				},
				deep: true
			},
			buttonEvenData: { //深度监听，可监听到对象、数组的变化
				handler(val, oldVal) {
					this.needButtonEvenData = val;
				},
				deep: true
			},
			buttonSixData: { //深度监听，可监听到对象、数组的变化
				handler(val, oldVal) {
					this.needButtonSixData = val;
				},
				deep: true
			}
		},
		mounted() {
			
			this.timer = setInterval(() => {
				this.getDevice();
			}, 10000);
			this.listHeight = window.getComputedStyle(this.$refs.myDiv).height;
			this.listWidth = window.getComputedStyle(this.$refs.myDiv).width;
			var widthIndex = this.listWidth.indexOf("px");
			var heightIndex = this.listHeight.indexOf("px");
			this.needWidth = this.listWidth.substring(0, widthIndex);
			this.needHeight = this.listHeight.substring(0, heightIndex);
			this.getRoomData.ID = this.$route.query.id;
			this.getBuildData.BuildID = this.$route.query.id;
			this.buildList = this.$route.query.buildList;
			this.getDevice();
			this.getRoom();
		}
	};
</script>
<style>
	.el-row {
		margin-bottom: 20px;
		&:last-child {
			margin-bottom: 0;
		}
	}
	
	.el-col {
		border-radius: 4px;
	}
	
	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}
	
	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}
	
	.drag_img {
		width: 20px;
		height: 20px;
		display: block;
		float: left;
		cursor: pointer;
	}
	
	.background-img {
		height: 80%;
		width: 80%;
		position: absolute;
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-moz-background-size: 100% 100%;
		/*  background-image: url(../assets/timg.jpg);*/
	}
	
	.top_left {
		width: 60%;
		float: left;
	}
	
	.top_right {
		width: 40%;
		margin-left: 60%;
		background: #ff6347;
	}
	
	.content {
		height: 600px;
		width: 300px;
		margin: auto;
	}
	
	.show {
		height: 30%;
	}
	
	.show1 {
		height: 15%;
	}
	
	.btnContent {
		height: 23.3%;
	}
	
	.btnContent1 {
		height: 50%;
	}
	
	.btn_left {
		width: 50%;
		float: left;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.btn_left img {
		display: block;
		height: 40px;
	}
	
	.btn_left span {
		display: block;
		padding-top: 10px;
	}
	
	.btn_right {
		width: 50%;
		margin-left: 50%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.btn_right img {
		display: block;
		height: 40px;
	}
	
	.yaokongClass {
		position: relative;
		height: 29%;
		width: 60%;
		margin-left: 20%;
	}
</style>